<script>
import CartItem from './CartItem.vue';
import Total from './Total.vue';

export default {
    name: '购物车组件',
    props: {
        goods: Array
    },
    components: {
        CartItem,
        Total
    }
}
</script>

<template>
    <div class="shopping-cart">
       <h3>购物车</h3>
       <CartItem v-for="(g,index) in goods" 
                 :ordinal="index+1"
                 :name="g.name"
                 :price="g.price"
                 :amount="g.amount"
                 :key="g.id">
       </CartItem>
       <Total :goods="goods"></Total>
    </div>
</template>

<style>
.shopping-cart {
    border: 1px solid #dfdfdf;
}

.shopping-cart>h3 {
    text-align: center;
}
</style>